<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<script src="resources/calendar-picker-common.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<input type="week" id="input" value="2000-W01">

<script>
description('Test if change event fires when the user selects the default value after the value was changed by JS.');

var eventsCounter = {};
function recordEvent(event) {
    if (eventsCounter[event.type] === undefined)
        eventsCounter[event.type] = 0;
    eventsCounter[event.type]++;
    debug('==> "' + event.type + '" event was dispatched.');
}

var input = document.getElementById('input');
input.addEventListener('input', recordEvent, false);
input.addEventListener('change', recordEvent, false);

input.value = '2000-W02';

shouldBeEqualToString('input.value', '2000-W02');
shouldBeUndefined('eventsCounter.input');
shouldBeUndefined('eventsCounter.change');

openPicker(input, test1);

function test1() {
    eventSender.keyDown('ArrowLeft');
    removeCommitDelay();
    eventSender.keyDown('Enter');

    waitUntilClosing(() => {
        shouldBeEqualToString('input.value', '2000-W01');

        shouldBe('eventsCounter.input', '1');
        shouldBe('eventsCounter.change', '1');

        finishJSTest();
    })
}
</script>
</body>
</html>
